<template>
    <div class="login-container">
        <!-- <div class="logo"></div> -->

        <h3 class="title">{{ title }}</h3>

        <el-form
            ref="loginForm"
            class="login-form"
            :model="loginForm"
            label-position="left"
            label-width="0">
            <div class="login-form-title">登录</div>

            <el-form-item prop="username">
                <label>用户名</label>
                <mt-input
                    ref="username"
                    v-model="loginForm.username"
                    simple
                    placeholder="请输入用户名">
                </mt-input>
            </el-form-item>

            <el-form-item prop="password">
                <label>密码</label>
                <mt-input
                    ref="password"
                    v-model="loginForm.password"
                    :type="passwordType"
                    simple
                    placeholder="请输入密码"
                    @keyup.enter.native="handleLogin">
                </mt-input>
                <div class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"></svg-icon>
                </div>
            </el-form-item>

            <mt-button
                class="login-btn"
                :loading="loginLoading"
                style="width: 100%"
                height="4rem"
                @click="handleLogin">
                登录
            </mt-button>
        </el-form>
    </div>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
    name: "Login",

    data () {
        return {
            loginForm: {
                username: "admin",
                password: "admin"
            },
            passwordType: "password", // 密码输入框类型
            loginLoading: false,

            redirect: undefined,
            otherQuery: {}
        };
    },

    computed: {
        title () {
            return this.CONF.title;
        }
    },

    watch: {
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                    this.otherQuery = this.getOtherQuery(query);
                }
            },
            immediate: true
        }
    },

    created () {
        const userAgent = navigator.userAgent;
        if (userAgent.indexOf("Chrome") <= -1) {
            this.$alert(
                "检测到您未使用Chrome浏览器, 请前往下载安装最新版本Chrome!",
                "",
                {
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    callback: (action) => {
                        window.open("https://www.google.cn/intl/zh-CN/chrome/");
                    }
                }
            );
        }
    },

    mounted () {
        // 初始化输入框焦点
        if (this.loginForm.username === "") {
            this.$refs.username.$children[0].focus();
        }
        else if (this.loginForm.password === "") {
            this.$refs.password.$children[0].focus();
        }
    },

    methods: {
        /* 登录按钮 */
        async handleLogin () {
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const params = {
                        userName: this.loginForm.username,
                        // password: this.encryptPass(this.loginForm.password)
                        password: this.loginForm.password
                    };
                    if (this.CONF.staticMode) {
                        const res = {
                            data: {
                                "access_token": "itg-test-token",
                                "user_code": "testUserCode",
                                "user_name": "测试账号",
                                "roles": [],
                                "role_menus": [],
                                "custom_menu": []
                            }
                        };
                        this.$store.dispatch("user/login", res.data).then(() => {
                            this.DICT.clearAllDict();
                            this.$router.push("/");
                            // this.$router.push({ path: this.redirect || "/", query: this.otherQuery });
                            this.loading = false;
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                    else {
                        await this.$request.post(this.API.LOGIN, params, { noGlobalParams: true }).then(res => {
                            if (res.success) {
                                this.$store.dispatch("user/login", res.data).then(() => {
                                    this.DICT.clearAllDict();
                                    this.$router.push("/");
                                    this.loading = false;
                                }).catch(() => {
                                    this.loading = false;
                                });
                            }
                            else {
                                this.$mtMessage.error(res.msg);
                                this.loading = false;
                            }
                        });
                    }
                }
                else {
                    this.loading = false;
                    return false;
                }
            });
        },

        /* 密码明暗切换 */
        showPwd () {
            this.passwordType = this.passwordType === "password" ? "text" : "password";
        },

        /* 密码加密 */
        encryptPass (word) {
            var date = new Date();
            let year = date.getFullYear(); //获取完整的年份(4位)
            var nowMonth = date.getMonth() + 1;
            if (nowMonth >= 1 && nowMonth <= 9) nowMonth = "0" + nowMonth;
            let dateR = date.getDate();
            if (dateR >= 1 && dateR <= 9) dateR = "0" + dateR;

            let val = "XMGMJKKJ_BigData";
            const key = CryptoJS.enc.Utf8.parse(val); // 用户名+年月日 20220622
            const srcs = CryptoJS.enc.Utf8.parse(word);
            const encrypted = CryptoJS.AES.encrypt(srcs, key, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
            return encrypted.toString();
        },

        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== "redirect") acc[cur] = query[cur];
                return acc;
            }, {});
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/theme.scss";
.login-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: url("../../assets/images/login_background.png") repeat center top;
    background-size: auto 100%;
    .logo {
        position: absolute;
        top: 3rem;
        left: 4.5rem;
        width: 112px;
        height: 28px;
        // background: url("../../assets/images/lgo.png");
        background-size: 100% 100%;
    }
    .title {
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
        font-size: 5.5rem;
        color: #191c22;
        text-align: center;
    }

    .login-form {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: #ffffff;
        border-radius: 10px;
        width: 40rem;
        max-width: 100%;
        padding: 5rem;
        margin: 0 auto;
        overflow: hidden;
        box-shadow: 0px 9px 20px 0px rgba(27, 33, 45, 0.15);
        &-title {
            font-size: $mt-fontsize_xl;
            color: $black;
            margin-bottom: 3rem;
        }

        .show-pwd {
            position: absolute;
            right: 1rem;
            line-height: 30px;
            font-size: $mt-fontsize_large;
            color: #999999;
            cursor: pointer;
            user-select: none;
        }

        .login-btn {
            margin-top: 2rem;
            height: 4rem !important;
        }
    }
}
</style>
<style lang="scss">
/* reset element-ui css */
.login-container {
    .el-form-item {
        margin-bottom: 0;
        .el-form-item__content {
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-bottom: 3rem;
            border-bottom: 1px solid $gray;
            label {
                width: 6.2rem;
                font-weight: 500;
                padding-right: 16px;
                flex-shrink: 0;
            }
        }
        .el-input__inner {
            border-bottom: none;
        }
    }
    .mt-select__prepend {
        width: 6.2rem; // 修复院区不对齐bug
    }
    // 处理错位问题
    .mt-select .el-select {
        transform: translateY(-0.5px);
    }
}
</style>